<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
<div>
    <el-card v-if="isList" class="cardclass">
        <el-header class="headerClass">
            <span class='spanClass'>
                <p style="padding: 0;margin: 0">
                    <b>评级模版：</b>基于系统中的评级参数，你在本模块可以建立评级模版。
                </p>
            </span>
        </el-header>
        <ft-pagination :total="totalElements" :current-page="currentPage" @pageChange="load" style="padding: 0 20px">
            <div slot="toolbar">
                <span style="text-align: left; float: left; padding:10px 6px 0 0">
                    <el-button type="primary" icon="joys-icon-refresh" size="small" @click="refreshPage">刷新</el-button>
                </span>
                <span style="float: left; padding:10px 72px 0 0">
                    <el-button icon="joys-icon-new" size="small" type="primary" @click="add">新增</el-button>
                </span>
                <span style="float: left; padding:10px 72px 0 0">
                     <ft-advanced-query title="请输入模板名称进行搜索" @packup="packup"
                                        @load="search"></ft-advanced-query>
                </span>
            </div>
          <el-row v-if="showQueryPanel">
            <!--高级查询-->
            <rating-template-query-form @query="search" @change="queryChange"></rating-template-query-form>
          </el-row>
            <el-table :data="templateData" ref="tableRef">
                <el-table-column min-width="110" align="left" label="名称">
                    <template slot-scope="scope">
                        <el-button type="text" style="padding-left: 0;margin-left: 0" @click="handleDetail(scope.row)">{{scope.row.templateName}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="creationDate" label="创建日期" min-width="80" align="left"></el-table-column>
                <el-table-column label="功能操作" min-width="80" align="center">
                    <template slot-scope="scope">
                        <el-popover
                            placement="top"
                            width="193"
                            v-model="scope.row.delVisible">
                            <p style="text-align: center; font-size: 12px;">数据删除后，将不能恢复，确定删除吗？</p>
                            <div style="text-align: center; margin: 0">
                                <el-button size="mini" @click="scope.row.delVisible = false">取消</el-button>
                                <el-button type="danger" size="mini" @click="handleDelete(scope.row)">确定</el-button>
                            </div>
                            <el-button slot="reference" type="text" size="small" style="color: #B94A48">删除</el-button>
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table>
        </ft-pagination>
    </el-card>
    
    <!-- 详情页面 -->
    <rating-template-detail v-if="isCard" 
                            :propsData="propsData"
                            :propActiveName="propActiveName"
                            :isFormDisabled="isFormDisabled"
                            @returnList="returnList">
    </rating-template-detail>
</div>
</template>

<script>
import RatingTemplateDetail from "./RatingTemplateDetail.vue";
import RatingTemplateQueryForm from "./RatingTemplateQueryForm";
export default {
    components: {RatingTemplateQueryForm, RatingTemplateDetail},
    mounted() {
        this.refreshPage()
    },
    data() {
        return {
            //分页
            currentPage: 1,
            pageSize: 8,
            totalElements: 0,
            //模糊查询
            selectValue:'',
            //模版数据
            templateData: [],
            //列表页面
            isList:true,
            //详情页面
            isCard:false,
            //详情编辑控制
            isFormDisabled:false,
            //详情数据
            propsData: {},
            //默认显示页签
            propActiveName: '',
          showQueryPanel: false,
          querParam: {},
        }
    },
    methods: {
      packup(showQueryPanel) {
        this.showQueryPanel = showQueryPanel
      },
      search(querParam) {
        querParam.initQuery = false
        this.querParam = querParam
        this.currentPage = 1
        this.load(this.currentPage, this.pageSize)
      },
      queryChange(querParam) {
        querParam.initQuery = false
        this.querParam = querParam
        this.currentPage = 1
      },
        //数据加载
        load(pageIndex, pageSize) {
            if(pageIndex != undefined){
                this.currentPage = pageIndex
            }
            if(pageSize != undefined){
                this.pageSize = pageSize
            }
            this.refreshPage()
        },
        handleSizeChange(val) {
            this.pageSize = val
            this.currentPage = 1
            this.refreshPage()
        },
        handleCurrentChange(val) {
            this.currentPage = val
            this.refreshPage()
        },
        //查看详情
        handleDetail(row) {
            let url = "/joys-rest/lss-customer/template"
            this.$http.get(url + "/" + row.ratingTemplateId).then(
                resp => {
                    this.propsData = resp.body
                    if(this.propsData.quotaCategoryVOS[0]){
                        this.propActiveName=this.propsData.quotaCategoryVOS[0].quotaCategorySubName
                    }
                    this.isList=false
                    this.isCard=true
                    this.isFormDisabled=true
                },
                resp => {
                    this.$message.error("数据异常，请刷新重试！")
                }
            )
        },
        //删除
        handleDelete(scope) {
            let url = "/joys-rest/lss-customer/template"
            this.$http.delete(url + "/" + scope.ratingTemplateId).then(
                resp => {
                    this.refreshPage()
                    this.$message.success('删除成功！')
                },
                resp => {
                    this.$message.error("删除失败！")
                }
            )
        },
        //返回列表
        returnList(){
            this.isList=true
            this.isAdd=false
            this.isCard=false
            this.refreshPage()
        },
        //刷新
        refreshPage() {
            let params = {
                pageSize: this.pageSize,
                pageIndex: this.currentPage,
                templateName: this.selectValue,
            }
            this.$http.post("/joys-rest/lss-customer/template/page",this.querParam,  {
              params: {
                pageIndex: this.currentPage,
                pageSize: this.pageSize,
              }
            })
            .then(resp => {
                if (resp.ok) {
                    this.templateData = resp.body.rows
                    this.totalElements = resp.body.total
                }
            })
        },
        //新增
        add(){
            this.propsData={
                creationDate: new Date().Format('yyyy-MM-dd')
            }
            this.isList=false
            this.isCard=true
            this.isFormDisabled=false
        },
    }
}
</script>
<style scoped>
.cardclass >>> .el-card__body {
    padding:0 !important;
}
.headerClass {
    text-align: left; 
    height: 30px;
    background-color:#E4E8EB; 
    font-size: 12px; 
    padding: 0 0 0 20px;
}
.spanClass {
    text-align:left;
    background-color:#E4E8EB;
    padding-left:10px;
}
.el-select-el-input .el-input__inner{
    border-radius: 9px;
}
.input-with-select .el-input__inner{
    border-radius: 9px;
}
header-cell-style {
    background:'#F4F8F9';
}
</style>
